<template>
  <div>
    <h1>商品详情页</h1>
    <div v-if="productData">
      <h2>{{ productData.l_name }}</h2>
      <p>价格: {{ productData.l_money }}</p>
      <img :src="productData.l_img" alt="商品图片" />
      <p>{{ productData.l_description }}</p>
    </div>
    <div v-else>
      <p>正在加载数据...</p>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref, computed, onMounted } from 'vue';
import http from "../../http/index";

const route = useRoute();
const productId = route.params.productId;
const productData = ref(null);

// 根据 productId 获取商品数据
const getProductData = async () => {
  try {
    const response = await http.get(`/home/lianjie/${productId}/`);
    productData.value = response.data;
  } catch (error) {
    console.error('获取商品数据失败:', error);
  }
};

// 初始化加载数据
onMounted(() => {
  getProductData();
});
</script>

<style scoped>
/* 样式 */
</style>